<template>
  <el-dialog v-model="addOrEditVisible" title="商户信息"
             :before-close="closeEditDialog"
             width="50%">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules"
             label-width="160px" class="demo-ruleForm"
             :size="formSize" status-icon>
      <!--      <el-row>-->
      <!--        <el-col :span="24">-->
      <!--          <el-form-item label="" prop="id">-->
      <!--            <el-input v-model="ruleForm.id"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <el-row>
        <el-col :span="12">
          <el-form-item label="商户来源" prop="shopSource">
            <el-select v-model="ruleForm.shopSource" placeholder="请选择商户来源"
                       style="width:100%">
              <el-option label="抖音" :value=0></el-option>
              <el-option label="美团" :value=1></el-option>
              <el-option label="系统自建" :value=2></el-option>
            </el-select>
            <div class="form-tip">商户来源：商户来源于美团、抖音还是系统自建</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="归属城市" prop="city">
            <el-select v-model="ruleForm.city" placeholder="请选择归属城市" style="width:100%">
              <el-option label="南通" value="南通"></el-option>
              <el-option label="无锡" value="无锡"></el-option>
              <el-option label="徐州" value="徐州"></el-option>
              <el-option label="连云港" value="连云港"></el-option>
              <el-option label="盐城" value="盐城"></el-option>
              <el-option label="上海" value="上海"></el-option>
<!--              <el-option label="苏州" value="苏州"></el-option>-->
<!--              <el-option label="常州" value="常州"></el-option>-->
<!--              <el-option label="常州" value="常州"></el-option>-->
            </el-select>
<!--            <div class="form-tip">商户来源：商户来源于美团、抖音还是系统自建</div>-->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="门店ID" prop="poiId">
            <el-input v-model="ruleForm.poiId"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="门店名称" prop="poiName">
            <el-input v-model="ruleForm.poiName"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="营业执照地址" prop="address">
            <el-input v-model="ruleForm.address"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="维度" prop="latitude">
            <el-input v-model="ruleForm.latitude"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经度" prop="longitude">
            <el-input v-model="ruleForm.longitude"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="账户信息" prop="accountId">
            <el-input v-model="ruleForm.accountId"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="账户名称" prop="accountName">
            <el-input v-model="ruleForm.accountName"/>
            <!--            <span class="form-tip">商户来源：商户来源于美团还是抖音</span>-->
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="法人姓名" prop="corporation">
            <el-input v-model="ruleForm.corporation"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法人电话" prop="corporationPhone">
            <el-input v-model="ruleForm.corporationPhone"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="法人照片" prop="corporationPhotoss">
            <form-up-load-multi-image
                :image-lists="ruleForm.corporationPhotoss"
                @uploadImageMultiCallback="corporationPhotossCallback"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="法人收款账号" prop="corporationCard">
            <el-input v-model="ruleForm.corporationCard"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法人开户行" prop="corporationCardBank">
            <el-input v-model="ruleForm.corporationCardBank"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="营业执照名称" prop="businessLicense">
            <el-input v-model="ruleForm.businessLicense"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="门店手机号码" prop="storePhone">
            <el-input v-model="ruleForm.storePhone"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="之前是否开通过抖音" prop="dredgeDouyin">
            <el-select v-model="ruleForm.dredgeDouyin" clearable placeholder="请选择之前是否开通过抖音">
              <el-option :label="'没有'" value="0"></el-option>
              <el-option :label="'自己上的团购'" value="1"></el-option>
              <el-option :label="'加盟别的品牌'" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="之前是否开通过团购" prop="dredgeBuy">
            <el-select v-model="ruleForm.dredgeBuy" clearable placeholder="请选择之前是否开通过团购">
              <el-option :label="'未绑定'" value="0"></el-option>
              <el-option :label="'已绑定'" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="收货地址" prop="deliveryAddress">
            <el-input v-model="ruleForm.deliveryAddress"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="营业时间" prop="businessHour">
            <el-input v-model="ruleForm.businessHour"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="卫生许可证图" prop="sanitaryLicensePhotoss">
            <form-up-load-multi-image
                :image-lists="ruleForm.sanitaryLicensePhotoss"
                @uploadImageMultiCallback="sanitaryLicensePhotossCallback"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="营业执照照片" prop="businessLicensePhotoss">
            <form-up-load-multi-image
                :image-lists="ruleForm.businessLicensePhotoss"
                @uploadImageMultiCallback="businessLicensePhotossCallback"/>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col :span="24">
          <el-form-item label="门头照" prop="doorPhotoss">
            <form-up-load-multi-image
                :image-lists="ruleForm.doorPhotoss"
                @uploadImageMultiCallback="doorPhotossCallback"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="店内环境照" prop="evnPhotoss">
            <form-up-load-multi-image
                :image-lists="ruleForm.evnPhotoss"
                @uploadImageMultiCallback="evnPhotossCallback"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="抖音截图" prop="douyinPhotoss">
            <form-up-load-multi-image
                :image-lists="ruleForm.douyinPhotoss"
                @uploadImageMultiCallback="douyinPhotossCallback"
            />
          </el-form-item>
        </el-col>
      </el-row>



      <!--      <el-row>-->
      <!--        <el-col :span="24">-->
      <!--          <el-form-item label="状态 0-停用 1-启用 2-备用" prop="statusFlag">-->
      <!--            <el-input v-model="ruleForm.statusFlag"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <!--      <el-row>-->
      <!--        <el-col :span="24">-->
      <!--          <el-form-item label="是否删除 0-否 1-是" prop="delFlag">-->
      <!--            <el-input v-model="ruleForm.delFlag"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <!--      <el-row>-->
      <!--        <el-col :span="24">-->
      <!--          <el-form-item label="创建人" prop="createUser">-->
      <!--            <el-input v-model="ruleForm.createUser"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <!--      <el-row>-->
      <!--        <el-col :span="24">-->
      <!--          <el-form-item label="创建时间" prop="createTime">-->
      <!--            <el-input v-model="ruleForm.createTime"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <!--      <el-row>-->
      <!--        <el-col :span="24">-->
      <!--          <el-form-item label="修改时间" prop="updateTime">-->
      <!--            <el-input v-model="ruleForm.updateTime"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="ruleForm.remark"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
         <span class="dialog-footer">
           <el-button @click="closeEditDialog">关闭</el-button>
           <el-button type="primary"
                      @click="submitForm(ruleFormRef)">提交</el-button>
         </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import {ElMessage} from "element-plus";
import router from "@/router";
import {RetailShop} from '@/apis/model/shop/RetailShopModel';
import {
  insertRetailShop,
  updateRetailShop
} from '@/apis/http/shop/RetailShopHttp';
import FormUpLoadMultiImage from "@/components/form/FormUpLoadMultiImage.vue";

interface Prop {
  addOrEditVisible: boolean,
  ruleForm: RetailShop,
  addDataType: string
}

// 刷新list页面
const refushList = ref(false);

// 传递过来的参数
const props = defineProps<Prop>();

const emit = defineEmits(["closeEditDialog"]);

// 关闭按钮
const closeEditDialog = () => {
  emit("closeEditDialog", {
    addOrEditVisible: !props.addOrEditVisible,
    refushList: refushList.value
  })
}
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()

const rules = reactive<FormRules>({
  id: [
    {required: true, message: '请输入', trigger: 'blur'}
  ],
  shopSource: [
    {required: true, message: '请输入商户来源', trigger: 'blur'}
  ],
  poiId: [
    {required: true, message: '请输入门店ID', trigger: 'blur'}
  ],
  poiName: [
    {required: true, message: '请输入门店名称', trigger: 'blur'}
  ],
  address: [
    {required: true, message: '请输入门店地址', trigger: 'blur'}
  ],
  latitude: [
    {required: true, message: '请输入维度', trigger: 'blur'}
  ],
  longitude: [
    {required: true, message: '请输入经度', trigger: 'blur'}
  ],
  accountId: [
    {required: true, message: '请输入账户信息', trigger: 'blur'}
  ],
  accountName: [
    {required: true, message: '请输入账户名称', trigger: 'blur'}
  ],
  statusFlag: [
    {required: true, message: '请输入状态 0-停用 1-启用 2-备用', trigger: 'blur'}
  ],
  delFlag: [
    {required: true, message: '请输入是否删除 0-否 1-是', trigger: 'blur'}
  ],
  createUser: [
    {required: true, message: '请输入创建人', trigger: 'blur'}
  ],
  createTime: [
    {required: true, message: '请输入创建时间', trigger: 'blur'}
  ],
  updateTime: [
    {required: true, message: '请输入修改时间', trigger: 'blur'}
  ],
  remark: [
    {required: true, message: '请输入备注', trigger: 'blur'}
  ],
})

const businessLicensePhotossCallback = (e: any[]) => {
  let businessLicensePhotos = e;
  let businessLicensePhotoss = [] as string[];
  if (businessLicensePhotos != null && businessLicensePhotos.length > 0) {
    businessLicensePhotos.forEach(s => {
      businessLicensePhotoss.push(s.url)
    })
  }
  props.ruleForm.businessLicensePhotos = businessLicensePhotoss
}

const sanitaryLicensePhotossCallback = (e: any[]) => {
  let sanitaryLicensePhotos = e;
  let sanitaryLicensePhotoss = [] as string[];
  if (sanitaryLicensePhotos != null && sanitaryLicensePhotos.length > 0) {
    sanitaryLicensePhotos.forEach(s => {
      sanitaryLicensePhotoss.push(s.url)
    })
  }
  props.ruleForm.sanitaryLicensePhotos = sanitaryLicensePhotoss
}

const corporationPhotossCallback = (e: any[]) => {
  let corporationPhotos = e;
  let corporationPhotoss = [] as any[];
  if (corporationPhotos != null && corporationPhotos.length > 0) {
    corporationPhotos.forEach(s => {
      corporationPhotoss.push(s.url)
    })
  }
  props.ruleForm.corporationPhotos = corporationPhotoss
}
const doorPhotossCallback = (e: any[]) => {
  let doorPhotos = e;
  let doorPhotoss = [] as any[];
  if (doorPhotos != null && doorPhotos.length > 0) {
    doorPhotos.forEach(s => {
      doorPhotoss.push(s.url)
    })
  }
  props.ruleForm.doorPhotos = doorPhotoss
}

const evnPhotossCallback = (e: any[]) => {
  let evnPhotos = e;
  let evnPhotoss = [] as string[];
  if (evnPhotos != null && evnPhotos.length > 0) {
    evnPhotos.forEach(s => {
      evnPhotoss.push(s.url)
    })
  }
  props.ruleForm.evnPhotos = evnPhotoss
}

const douyinPhotossCallback = (e: any[]) => {
  let douyinPhotos = e;
  let douyinPhotoss = [] as string[];
  if (douyinPhotos != null && douyinPhotos.length > 0) {
    douyinPhotos.forEach(s => {
      douyinPhotoss.push(s.url)
    })
  }
  props.ruleForm.douyinPhotos = douyinPhotoss
}

const submitForm = async (formEl: FormInstance | undefined) => {

  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 新增
      if (props.addDataType === 'add') {
        insertRetailShop(props.ruleForm).then(res => {
          const code = res.code;
          const message: string = res.message;
          const data = res.data;
          if (code == 200) {
            ElMessage({
              message: '创建成功！',
              type: 'success',
            })
            refushList.value = true
            closeEditDialog()
          } else {
            ElMessage.error('创建失败！')
          }
        })
      } else if (props.addDataType === 'edit') {
        updateRetailShop(props.ruleForm).then(res => {
          const code = res.code;
          const message: string = res.message;
          const data = res.data;
          if (code == 200) {
            ElMessage({
              message: '更新成功！',
              type: 'success',
            })
            refushList.value = true
            closeEditDialog()
          } else {
            ElMessage.error('更新失败！')
          }
        })
      }
    } else {
      ElMessage.error('请完善信息！')
    }
  })
}
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}

.form-tip {
  color: gray;
}
</style>
